@charset "utf-8";
/*T5 Styles*/


/*resets globales*/
*{  transition: all 0.5s ease;}
a{text-decoration: none;}
img{max-width: 100%}
ul{padding: 0}
p{font-weight: normal}
strong{color: #E13731}
h3{color:#E13731; font-weight: normal; font-size: 40px }

/* relaciones de color fondo/texto */
.bg-red{background-color:#E13731; color:#fff}

/* botones y CTAs */
.btn{padding:10px 75px; border-radius: 20px; font-weight: bold; display: inline-block; font-size: 18px}
.btn.outline{border:2px solid #E13731; color: #E13731;}
.btn.outline:hover{background: #E13731; color:#fff}

/*.divider::after{content:''; background:url("../imgs/title-divider.svg") no-repeat; width: 161px; height: 13px; margin:15px auto; display: block}*/

header{font-size: 15px; padding-bottom:45px; position: relative;}
header#home{min-height: 50vh}
header::after {
  content: "";  background: #eee url("../Inicio - files/fondo.jpg");  filter: grayscale(1); opacity: 0.1;  top: 0;  left: 0;  bottom: 0;  right: 0; position: absolute;  z-index: -1;  }

header .top_overlay{background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(70%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

/*Solapa / datos de contacto en header */
.top-margin a i {margin-right:15px; float: left; display: inline-block}
.top-margin a{display: inline-block; color: #ffffff; font-size: 12px }
	.top-margin{position:absolute; top:0; right: 0; border-bottom-left-radius: 10px; padding: 10px ; text-align: center; z-index: 100;}
	  .top-margin a:first-child{margin-right: 15px}
.top-margin #lang{margin-left: 15px;display: inline-block;  padding-left: 15px; border-left: 1px solid rgba(255,255,255,.5);}
.top-margin #lang a.active{font-weight: bold; color:#fff}
.top-margin #lang a{font-weight: 300; color:#eeeeee}  
.top-margin #lang a img{ filter: grayscale(1); opacity:0.6;     max-height: 15px!important;    margin-top: 5px;    border: 1px solid rgba(255,255,255,.4);}
.top-margin #lang a.active img{ filter: grayscale(0); opacity:1; }

  @media only screen and (min-width: 60em) {
	.top-margin{position:absolute; top:0; right: 0; border-bottom-left-radius: 10px; padding: 5px 45px; text-align: center}
	  .top-margin a{display: inline-block; color: #ffffff; font-size: 16px }
	.top-margin a:first-child{margin-right: 25px}
}


/**/
.logo{margin-top:20px}

/*Navegación superior*/
header nav.menu{margin-top:30px; float: right; display: none}
header nav.menu li {display: inline-table; vertical-align: middle; position: relative}
header nav.menu li a{padding: 15px 10px; font-size: 16px; font-weight: bold; text-transform: uppercase}
header nav.menu li:hover a{border-bottom: 3px solid #E13731}
header nav.menu ul.smenu{display:none; position:absolute; width: max-content; left:0; top:40px; background:#000; border-radius: 6px; overflow: hidden; z-index: 90; margin-left:0!important}
header nav.menu li.has-smenu:hover ul.smenu{display:block}
header nav.menu li ul.smenu li{display: block; }
header nav.menu li ul.smenu li a{display: block; padding:15px; color:#fff; border:none; font-weight: normal; text-transform: none }
header nav.menu li ul.smenu li:hover a{background: #E13731 }
header .top-nav .menu-trigger{ display: block}

header .top-nav{padding-top:50px}
header .top-nav .menu-trigger{ margin-top: 20px; float: right}

header .top-nav .menu-mobile{ display: none}

header .top-nav .menu-trigger:hover .menu-mobile{ display: block}


/*************************************************************************************************/




.nav-open main {
  transform: scale(.8);
}

.nav-trigger {
  position: fixed;
  z-index: 4;
  top: 78px;
  right: 40px;
  height: 44px;
  width: 44px;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
}

.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
  position: absolute;
  height: 4px;
  width: 36px;
  background: #E13731;
}

.nav-trigger span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background .3s;
}

.nav-trigger span::before,
.nav-trigger span::after {
  content: '';
  top: 0;
  left: 0;
  transition: background .3s, transform .3s;
}

.nav-trigger span::before {
  transform: translateY(-12px);
}

.nav-trigger span::after {
  transform: translateY(12px);
}

.nav-trigger:hover span, 
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
  background: #E13731;
}

.nav-open .nav-trigger span {
  background: transparent;
}

.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
  background: #E13731;
}

.nav-open .nav-trigger span::before {
  transform: rotate(-45deg);
}

.nav-open .nav-trigger span::after {
  transform: rotate(45deg);
}

.overlay {
  position: fixed;
  z-index: 2;
  top: 45px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1C1D21;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

.nav-open .overlay {
  opacity: .6;
  visibility: visible;
}

.nav-container {
 position: fixed;
    z-index: 3;
    top: 45px;
    right: 0;
    height: fit-content;
    width: 50%;
    padding: 0;
    background: #000000;
    overflow: auto;
    transform: translateZ(0);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.07,.23,.34,1);
	padding-top: 60px;
}

.nav-open .nav-container {
  transform: translateX(0);
}


.nav {
  list-style: none;
  padding: 0;
}

.nav a {
  display: block;
  padding: 1em 0;
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  color: #fff;
  transform: translateZ(0);
 text-align: center;
}

.nav a img{display:block; margin:5px auto; max-width: 25px }

.nav-open .nav a {
  animation: slide-in .4s .2s backwards;
}

.nav-open .nav li:nth-of-type(2) a {
  animation-delay: .3s;
	background-color: #6b86f2

}

.nav-open .nav li:nth-of-type(3) a {
  animation-delay: .4s;
}

.nav-open .nav li:nth-of-type(4) a {
  animation-delay: .5s;
  background-color: #2C2829

}

.nav-open .nav li:nth-of-type(5) a {
  animation-delay: .6s;
  /*background-color:  #E13731*/

}

.nav-open .nav{ margin-bottom:0}

.nav-open .nav li.has-smenu ul{display: none}

.nav-open .nav li.has-smenu ul li a{padding:5px 10px}


.nav-open .nav li.has-smenu:hover ul{display: block}



@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*************************************************************************************************/


  @media only screen and (min-width: 60em) {
	  		header nav.menu{display: block }
	  header .top-nav .nav-trigger{display: none}

}



/**/
header h1{margin-bottom:50px}
header h1 span{color: #E13731}

header .social_tag{background: #E13731; width: fit-content; position:absolute; bottom:-25px; right: 0px; padding: 0px; padding-right: 25px}
header .social_tag a {padding:10px 5px; display: inline-block}
header .social_tag a:hover {background:#000 }
header#home .social_tag{ bottom:-25px; }


/* SERVICIOS  */
#servicios{padding-top: 50px}
#servicios .block img {max-height: 200px; }
#servicios .block, #servicios-interior .block{display: table!important; vertical-align: middle!important; text-align: center}
#servicios .block a{display: block}
#servicios .block a:hover{ filter: hue-rotate(180deg);;}
    #servicios .block.sm-show,  #servicios-interior .block.sm-show{display: table!important}
  #servicios   .block.sm-hide, #servicios-interior   .block.sm-hide{display: none!important}
	  #servicios .block.md-show, #servicios-interior .block.md-show{display:none!important}
#servicios .block.md-hide, #servicios-interior .block.md-hide{display: table!important}

/*ABOUT*/
#conocenos { padding: 35px 0; position:relative;}
#conocenos::after { content: "";  background: #eee url("../Inicio - files/back_somos.jpg") left no-repeat; filter: grayscale(1); background-size:cover; opacity: 0.1;  top: 0;  left: 0;  bottom: 0;  right: 0; position: absolute;  z-index: -1;  }
#conocenos p{width: 90%; margin: 20px auto; font-size:16px }
#conocenos .btn{margin-top:25px}
#conocenos .staff-circle img{border:1px solid #E13731; border-radius: 100px}

/*CLIENTES*/
#clientes {padding:45px 0}
#clientes .block img{ filter: grayscale(1); opacity:0.6; max-height: 70px;  margin: 5px auto; }
#clientes .block:hover img{ filter: grayscale(0); opacity:1; cursor: pointer}

/*CONTACTO*/
#contacto{background:#E5E5E5}
#contacto h3{margin-bottom: 10px}
#contacto form{}


  @media only screen and (min-width: 60em) {
    #contacto form {width: 70%; margin: 25px auto } 
    #servicios{padding-top: 20px}
    #servicios .block img {max-width: 90%}
header#home .social_tag{ bottom:5px; }
	  
#servicios .block.sm-show{display:none!important}
#servicios .block.sm-hide, #servicios-interior .block.sm-hide{display: table!important}
	  #servicios .block.md-show{display:table!important}
#servicios .block.md-hide{display: none!important}
#conocenos p { width: 70%;  margin: 20px auto;}
}


input[type="text"], form input[type="email"],  input[type="tel"], textarea { padding:15px 10px; border:1px solid #E13731; width: 100%; border-radius:6px }
input[type="submit"] {background:#E13731; color:#fff; padding:15px 75px; box-shadow: none; border:#E13731 2px solid; margin-top:35px }
input[type="submit"]:hover {background:#fff; border:#E13731 2px solid; color:#E13731; padding:15px 75px; box-shadow: none; cursor: pointer;  }


/*Footer*/
footer {background:linear-gradient(180deg, #252330 -25.42%, #18161F 47.12%, #252330 121.19%); color:#fff; padding: 45px 0; font-size: 14px }
footer a {color:#fff; display: block; clear: both;  padding:5px 0 }
footer a i{padding-right: 10px; display: inline-block}
footer .location i{float:left; padding-bottom:35px; display: inline-block}
footer .certif img{max-height: 75px}
footer .certif img:first-child{margin-right: 25px;}
footer .logo img{margin-top:-15px}


/*******************************************************/

.int-content .divider::after{content:''; background:url("../Inicio - files/title-divider.svg") no-repeat; width: 161px; height: 13px; margin:15px 0; display: block}

.int-content h3{color:#000; font-size: 30px}

.int-content ul {margin-left: 0px; }

.int-content ul li{margin: 20px 10px; list-style: none; background: url("../Inicio - files/check_gray.png") no-repeat 0 4px; padding-left:30px}

.int-content ul li.featured {
    color: #E13731;
    background: #eee url(../Inicio - files/check_red.png) no-repeat 15px 18px;
    margin-left: -5px;
    padding-left: 40px;
    padding-right: 17px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 4px;
    font-weight: bold;
}

.int-content li ul{margin-left:35px!important}


#mas-servicios{padding:35px 0; text-align: center; font-size: 16px; background:#F8F9FA; margin-top:45px}
#mas-servicios .col-2 { text-align: center }
#mas-servicios .col-2 img{ display: block; margin:20px auto; margin-bottom: 15px;  }
#mas-servicios .col-2.soporte img{max-width:110px }

#mas-servicios .col-2 span{ display: block; margin-bottom: 20px}

#servicios-interior{background-color:#f8f9fa}
#servicios-interior img{max-height:120px; margin: 5px auto;}
#servicios-interior block{text-align: center!important}